<!--
    @author: crissy-月下闲人
-->

<script lang="ts" setup>
import { ref } from 'vue'
import router from '../router'
import { ElMessage } from 'element-plus'
import { loginAPI, registerAPI } from '../http/api/user'

let isLogin = ref(true)

let username = ref('');
let password = ref('');

function toLogin() {
    if (username.value.trim() == "" || password.value.trim() == "") {
        ElMessage({
            message: "温馨提示，账号、密码不为空！",
            type: "warning",
        });
        return;
    }

    if (!/^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/.test(username.value)
        || !/^\S{6,}$/.test(password.value)) {
        ElMessage({
            message: "请检查你的账号、密码格式！",
            type: "warning",
        });
        return;
    }

    loginAPI(username.value, password.value,).then((res) => {
        if (res.code == 200) {
            ElMessage({
                message: '欢迎回来 ！',
                type: "success",
            });
            document.cookie = `token=${res.data}; path=/`;
            router.push('/home');
        }
        else {
            ElMessage({
                message: res.message,
                type: "error",
            });
        }
    });
}


let registerName = ref('');
let registerPW = ref('');
let __registerPW = ref('');
function toRegister() {
    if (registerName.value.trim() == "" || registerPW.value.trim() == "") {
        ElMessage({
            message: "温馨提示，账号、密码不为空！",
            type: "warning",
        });
        return;
    }
    if (registerPW.value != __registerPW.value) {
        ElMessage({
            message: "密码输入不一致！",
            type: "warning",
        });
        return;
    }
    if (!/^[a-zA-Z][-_a-zA-Z0-9]{5,19}$/.test(registerName.value)
        || !/^\S{6,}$/.test(registerPW.value)) {
        ElMessage({
            message: "请检查你的账号、密码格式！",
            type: "warning",
        });
    }

    registerAPI(registerName.value, registerPW.value).then((res) => {
        console.log(res);
        if (res.code === 200) {
            ElMessage({
                message: "注册成功！请前往登录！",
                type: "success",
            });

            isLogin.value = true;
            username.value = registerName.value;
            password.value = registerPW.value;
        } else {
            ElMessage({
                message: res.message,
                type: "error",
            });
        }
    });
}
</script>

<template>
    <div class=" main-box">
        <div
            class=" lg:w-1/2 w-full  absolute left-0 h-full  flex flex-wrap justify-center items-center overflow-hidden">
            <span class="logo flex w-[15rem] text-center">
                Data Masking System
            </span>
            <span class=" flex w-full text-white justify-end px-20 items-center">
                ————By Mr.郭
            </span>
        </div>
        <div
            class=" bg-[#ffffffe0] lg:w-1/2 w-full  absolute right-0 h-full  flex justify-center items-center overflow-hidden z-10">
            <div :class="!isLogin ? 'absolute -left-[100%]' : ''" class="loginBox duration-300">
                <span class="title">LOGIN</span>
                <div class="input-box">
                    <input class="username-message" v-model="username" type="text" placeholder="账号"
                        pattern="^[a-zA-Z][\-_a-zA-Z0-9]{5,19}$">
                </div>
                <div class="input-box">
                    <input class="password-message" v-model="password" type="password" placeholder="密码"
                        pattern="^\S{6,}$">
                </div>
                <div @click="toLogin" class="button">登录</div>
                <span @click="isLogin = !isLogin" class="message">没有账户点击注册</span>
            </div>

            <div :class="isLogin ? 'absolute -left-[100%] ' : ''" class=" registerBox duration-300">
                <span class="title"> REGISTER </span>
                <div class=" input-box">
                    <input v-model="registerName" class="username-message" type="text" placeholder="账号"
                        pattern="^[a-zA-Z][\-_a-zA-Z0-9]{5,19}$">
                </div>
                <div class=" input-box">
                    <input v-model="registerPW" class="password-message" type="password" placeholder="密码"
                        pattern="^\S{6,}$">
                </div>
                <input v-model="__registerPW" type="password" placeholder="确认密码">
                <div @click="toRegister" class="button">注册</div>
                <span @click="isLogin = !isLogin" class="message">已有账户点击登录</span>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
* {
    font-family: "Cormorant Garamond", serif;
}

.logo {
    font-size: 5rem;
    color: #c0bec5;
    font-weight: 700;
}

input {
    outline: none;
    border: none;
    border-bottom: 2px solid #673ab7;
    color: #673ab7;
    width: 20rem;
    background: transparent;
    display: block;
    letter-spacing: .2rem;
    font-size: large;
}

input::placeholder {
    color: #673ab7;
    font-size: 1rem;
}

.main-box {
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
    background-image: url("../assets/img/loginBg.jpg");
    background-size: cover;
    background-position: center;
}

.title {
    position: relative;
    top: -4rem;
    font-size: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #673ab7;
    letter-spacing: .5rem;
}

.message {
    display: block;
    text-align: left;
    margin-top: 1rem;
    font-size: .7rem;
    color: #673ab7;
    text-decoration: underline;
    cursor: pointer;
    user-select: none;
}

.button {
    width: 20rem;
    height: 2.5rem;
    border-radius: .5rem;
    background: #673ab7;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
}

.loginBox {
    input {
        margin-bottom: 5rem;
    }
}

.registerBox {
    .title {
        position: relative;
        top: -2rem;
    }

    input {
        margin-bottom: 3rem;
    }
}

.input-box {
    position: relative;
}

.input-box:has(.username-message:invalid)::after {
    content: '6至20位，以字母开头，字母、数字、减号、下划线';
    width: 120%;
    position: absolute;
    top: 2rem;
    color: #673ab7;
    font-size: 14px;
}

.input-box:has(.password-message:invalid)::after {
    content: '至少六位';
    width: 120%;
    position: absolute;
    top: 2rem;
    color: #673ab7;
    font-size: 14px;
}
</style>